<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
  </head>
  <body>
    <!-- 大盒子 -->
    <div class="container">
      <!-- 头部 -->
      <header>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="img/pic_banner_shouye@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="img/pic_banner_shouye@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="img/pic_banner_shouye@2x.png" alt="" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </header>
      <!-- 中间块 -->
      <!-- 推荐课程 -->
      <section>
        <div class="recommend">
          <!-- 上面部分 -->
          <div class="recommend-plan">
            <img src="./img/pic_blue_kaiban@2x.png" alt="" />
          </div>
          <div class="recommend-content">
            <h3 class="recommend-title">推荐课程</h3>
            <ul>
              <li>
                <div>
                  <img src="./img/uni.jpg" alt="" />
                </div>
                <div class="time">
                  <h4>web前端全栈工程师</h4>
                  <p>零基础入门</p>
                  <p>开班时间：2020-08-19</p>
                  <p class="more">
                    <span>西安校区</span>
                    <a href="javascript;">立即抢座</a>
                  </p>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  <img src="./img/uni.jpg" alt="" />
                </div>
                <div class="time">
                  <h4>web前端全栈工程师</h4>
                  <p>零基础入门</p>
                  <p>开班时间：2020-08-19</p>
                  <p class="more">
                    <span>西安校区</span>
                    <a href="javascript;">立即抢座</a>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 推荐项目 -->
        <div class="recommend">
          <!-- 上面部分 -->
          <div class="recommend-plan">
            <img src="img/pic_red_qiye@2x.png" alt="" />
          </div>
          <div class="recommend-content">
            <h3 class="recommend-title project">推荐项目</h3>
            <ul>
              <li>
                <div>
                  <img src="./img/uni.jpg" alt="" />
                </div>
                <div class="time">
                  <h4>web前端全栈工程师</h4>
                  <p>零基础入门</p>
                  <p>开班时间：2020-08-19</p>
                  <p class="more">
                    <span>西安校区</span>
                    <a href="javascript;">立即抢座</a>
                  </p>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  <img src="./img/uni.jpg" alt="" />
                </div>
                <div class="time">
                  <h4>web前端全栈工程师</h4>
                  <p>零基础入门</p>
                  <p>开班时间：2020-08-19</p>
                  <p class="more">
                    <span>西安校区</span>
                    <a href="javascript;">立即抢座</a>
                  </p>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  <img src="./img/uni.jpg" alt="" />
                </div>
                <div class="time">
                  <h4>web前端全栈工程师</h4>
                  <p>零基础入门</p>
                  <p>开班时间：2020-08-19</p>
                  <p class="more">
                    <span>西安校区</span>
                    <a href="javascript;">立即抢座</a>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!-- 底部 -->
      <footer>
        <ul>
          <li>
            <img src="./img/icon_tab_sy_s@2x.png" alt="" />
            <span>首页</span>
          </li>
          <li>
            <img src="./img/icon_tab_zxkc_n@2x.png" alt="" />
            <span>在线课程</span>
          </li>
          <li>
            <img src="./img/icon_tab_xxlj_n@2x.png" alt="" />
            <span>学习路径</span>
          </li>
          <li>
            <img src="./img/icon_tab_gywm_n@2x.png" alt="" />
            <span>关于我们</span>
          </li>
        </ul>
      </footer>
    </div>

    <script src="./js/flexible.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/zepto.min.js"></script>
    <script>
      $(function () {
        // swiper的使用
        const swiper = new Swiper(".swiper-container", {
          loop: true,
          pagination: {
            el: ".swiper-pagination",
          },
        });
      });
    </script>
  </body>
</html>
